<!--  -->
<template>

  <div v-loading="loading" class="home-page my-home" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="feckback-header">

    </div>
    <div class="home-content">
      <!--      <p class="is-a-title">这里应该是有个标题的</p>-->
      <el-row class="form-box">
        <el-form ref="feedbackForm"
                 :model="feedbackForm"
                 :rules="rules"
                 :label-width="labelWidth"
                 :hide-required-asterisk="true"
                 class="demo-feedbackForm"
                 size="small">
          <el-form-item label="报表名"
                        prop="report">
            <div class="display-flex">
              <div class="report-name-wrap">
                <el-select v-model="feedbackForm.reportCode"
                           type="input"
                           placeholder="请选择报表">
                  <el-option v-for="item in options"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="问题"
                        prop="checkList">
            <div class="check-box-list">
              <el-checkbox-group v-model="feedbackForm.checkList">
                <el-checkbox size="medium"
                             label="系统数据不准确"></el-checkbox>
                <el-checkbox size="medium"
                             label="取数逻辑不明"></el-checkbox>
                <el-checkbox size="medium"
                             label="系统运行慢、等待时间长"></el-checkbox>
                <el-checkbox size="medium"
                             label="系统功能不完善"></el-checkbox>
                <el-checkbox size="medium"
                             label="操作困难"></el-checkbox>
                <el-checkbox size="medium"
                             label="数据需要二次加工"></el-checkbox>
                <el-checkbox size="medium"
                             label="其他"></el-checkbox>

              </el-checkbox-group>
            </div>
          </el-form-item>
          <el-form-item label="建议反馈"
                        prop="feedback">
            <el-input v-model="feedbackForm.feedback"
                      :autosize="{ minRows: 6, maxRows: 10}"
                      type="textarea"
                      placeholder="请输入您要反馈的内容"
                      class="feedback"></el-input>
          </el-form-item>
          <el-form-item label=""
                        prop="">
            <div class="btn-box display-flex">
              <el-button v-waves :loading="btnLoading"
                         class="submit-btn my-btn"
                         type="info" @click="submitForm('feedbackForm')">提交反馈
              </el-button>
              <el-button v-waves v-if="longFlag"
                         class="clear-btn my-btn ml60"
                         @click="clearAuth()"
              >取消权限
              </el-button>
            </div>
          </el-form-item>

        </el-form>
      </el-row>
    </div>
    <!-- 感谢反馈弹框 -->
    <el-dialog v-el-drag-dialog :visible.sync="dialogTableVisible"
               :show-close="false"
               class="success-dialog"
               title=""
               width="30%"
               @dragDialog="handleDrag">
      <div class="success-box">
        <div class="success-box-text">
          感谢您的反馈！我们将尽快跟进。
        </div>
        <div class="success-box-btn">
          <el-button v-waves class="alert-btn"
                     @click="closeWin">确认
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import waves from '@/directive/waves/index.js' // 水波纹指令
import elDragDialog from '@/directive/el-dragDialog/index.js' // 水波纹指令
export default {

  components: {},
  directives: {
    waves,
    elDragDialog
  },
  data () {
    return {
      loading: false,
      btnLoading: false,
      labelWidth: '160px',
      userAccount: '',
      userId: '',
      options: [{
        label: '智能化分析',
        value: 'haha'
      }],
      dialogTableVisible: false,
      longFlag: false, // 默认不显示取消权限按钮
      feedbackForm: {
        reportCode: '',
        checkList: [],
        feedback: '' // 反馈内容
      },
      rules: {
        reportCode: [{
          required: true,
          message: '请选择需要反馈报表',
          trigger: 'blur'
        }],
        checkList: {
          required: true,
          message: '请选择问题类型',
          trigger: 'blur'
        },
        feedback: [{
          required: true,
          message: '请输入您的反馈建议',
          trigger: 'blur'
        }]
      }
    }
  },
  computed: {},

  mounted () {
    this.setLabelWidth()
    const params = this.$route.query
    if (params.userAccount && params.userId && params.modelCode && params.type && params.userName) {
      this.userAccount = params.userAccount
      this.userId = params.userId
      this.feedbackForm.reportCode = params.modelCode
      this.type = params.type
      this.userName = params.userName
      if (params.type && params.type === '2') {
        this.longFlag = true
      }
      this.getReportData()
    } else {
      this.$router.replace({ path: '/401' })
    }
  },

  methods: {
    getReportData () {
      const params = {
        userAccount: this.userAccount,
        userId: this.userId,
        modelCode: this.feedbackForm.report
      }
      this.$store.dispatch('getReportData', params).then((res) => {
        this.loading = false
        this.options = res
      }).catch((err) => {
        this.loading = false
        console.log(err)
      })
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const params = {
            userAccount: this.userAccount, // 用户账号
            userName: this.userName, // 用户名称
            modelCode: this.feedbackForm.reportCode, // 反馈报表
            questionTypeList: this.feedbackForm.checkList, // 问题
            suggest: this.feedbackForm.feedback, // 建议反馈
            visitCategory: this.type // 多久没访问 2一个月
          }
          this.loading = true
          this.$store.dispatch('submitFeedbackData', params).then((res) => {
            this.loading = false
            if (res.code === '1') {
              this.dialogTableVisible = true
            } else {

            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleDrag () {
    },
    clearAuth () {
      this.$router.push({
        path: '/clearAuth',
        query: {
          userId: this.userId,
          userAccount: this.userAccount, // 用户账号
          userName: this.userName // 用户名称
        }
      })
    },
    closeWin () {
      if (navigator.userAgent.indexOf('Firefox') !== -1 || navigator.userAgent.indexOf('Chrome') !== -1) {
        window.location.href = 'about:blank'
        window.close()
      } else {
        window.opener = null
        window.open('', '_self')
        window.close()
      }
    },
    setLabelWidth () {
      this.$nextTick(() => {
        if (document.body.clientWidth <= 900) {
          this.labelWidth = '100px'
        } else {
          this.labelWidth = '160px'
        }
      })
    }
  }
}

</script>
<style lang='scss' scoped>
  html, body {
    font-size: 16px;
    background: rgba(251, 251, 251, 1)
  }

  $browser-default-width: 1440px;
  $browser-default-height: 1024px;
  @function pxTovw($px) {
    //$px为需要转换的字号
    @return $px / $browser-default-width * 100vw;
  }

  @function pxTovh($px) {
    //$px为需要转换的字号
    @return $px / $browser-default-height * 100vh;
  }

  .el-form-item__label {
    color: #fff;
  }

  .feedback {
    width: 90%;

    textarea {
      background-color: rgba(255, 255, 255, 0.9);
    }
  }

  .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: pxTovw(120px);
  }

  .home-page {
    height: 100%;
    width: 100%;
    background: rgba(251, 251, 251, 1);
    overflow: auto;

    .feckback-header {
      height: 88px;
      background: url('../assets/img/home-bg.png') center center no-repeat;
      background-size: 100% 100%;
    }

    .home-content {
      margin: 20px auto;
      padding: 20px 0 90px;
      width: 900px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 1px 10px 0px rgba(95, 98, 113, 0.25);
      border-radius: 3px;

      .is-a-title {
        text-align: center;
        font-size: 24px;
      }

      .form-box {
        margin-top: pxTovw(40px);
      }

      .el-form-item--mini.el-form-item,
      .el-form-item--small.el-form-item {
        margin-bottom: pxTovh(30px);
      }
      .report-name-wrap {
        width: 250px;
      }
      .el-checkbox {
        width: 40%;
      }
      .btn-box {
        width: 90%;
        margin-top: pxTovh(30px);
        justify-content: center;
      }
      .my-btn{
        padding: 0;
        font-size: 16px;
        width: 268px;
        height: 52px;
        line-height: 52px;
        border-radius: 3px;
        cursor: pointer;
      }

      .submit-btn {
        border: 0;
        background: rgba(58, 162, 235, 1);
        &:hover{
          background: #50adef;
        }
      }

      .clear-btn {
        border: 1px solid rgba(58, 162, 235, 1);
      }
    }

    .success-box {
      text-align: center;

      .success-box-text {
        margin-top: 50px;
      }

      .el-button {
        margin: 33px auto 24px;
        color: #fff;
        padding: 0;
        width: 149px;
        height: 52px;
        background: rgba(58, 162, 235, 1);
        border-radius: 3px;
      }
    }

    .success-box-text {
      margin: 49px 30px 0;
      color: #333;
      font-size: 18px;
      text-align: center;
    }
  }

  @media screen and (max-width: 900px) {
    .home-page {
      .feckback-header{
        display: none;
      }
      .home-content{
        width:95%;
        padding: 20px 0 50px;
        .el-checkbox{
          width:60%;
        }
        .report-name-wrap {
          width: 200px;
        }
        .my-btn[data-v-1c369514] {
          padding: 0;
          font-size: 14px;
          width: 268px;
          height: 36px;
          line-height: 36px;
          border-radius: 3px;
          cursor: pointer;
        }
      }

    }
  }
</style>
<style lang="scss">
  .el-textarea__inner{
    background:rgba(247,247,247,1);
    border-radius:3px;
    border:1px solid rgba(215,220,255,1);
  }
  .el-checkbox__input.is-checked+.el-checkbox__label {
    color: #666666;
  }
  @media screen and (max-width: 900px) {
    .my-home{
      .el-dialog{
        width: 85%!important;
      }
    }
  }
</style>
